<template>
  <div class="home">
    <div class="content-swiper">
      <swiper loop auto height="3.7rem">
        <swiper-item  class="swiper-demo-img" v-for="(item, index) in demoList" v-if="index<5" :key="index">
          <a style="display:block;height:3.74rem;width:100%;backgroundSize:100%" :style="{backgroundImage: 'url(' +item.voteCoverUrl+ ')'}" @click="handleClickVoteItem(item)"></a>
        </swiper-item>
      </swiper>
      <div class="pos-group">
        <swiper loop auto :show-dots="false" height="1rem">
          <swiper-item  class="">
            <div class="flex-box-align" style="height: 100%">
              <div class="flex flex-cont group-item group-height">
                <img :src="echainImg.blockHeightFileUrl || require('../images/groupHeight.png')" alt="">
                <span>
                  <p>区块高度</p>
                  <p>
                    <countup :start-val="0" :end-val="echain.blockHeight || 0" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
              <div class="flex flex-cont group-item point-num">
                <img :src="echainImg.nodeFileUrl || require('../images/pointNum.png')" alt="">
                <span>
                  <p>节点数</p>
                  <p>
                    <countup :start-val="0" :end-val="JSON.parse(echain.blockNodes || 0)" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
              <div class="flex flex-cont group-item user-num">
                <img :src="echainImg.usersAmountFileUrl || require('../images/userNum.png')" alt="">
                <span>
                  <p>用户数</p>
                  <p>
                    <countup :start-val="0" :end-val="JSON.parse(echain.blockTransX || 0)" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
            </div>
          </swiper-item>
          <swiper-item  class="">
            <div class="flex-box-align" style="height: 100%">
              <div class="flex flex-cont group-item point-num">
                <img :src="echainImg.nodeFileUrl || require('../images/pointNum.png')" alt="">
                <span>
                  <p>节点数</p>
                  <p>
                    <countup :start-val="0" :end-val="JSON.parse(echain.blockNodes || 0)" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
              <div class="flex flex-cont group-item user-num">
                <img :src="echainImg.usersAmountFileUrl || require('../images/userNum.png')" alt="">
                <span>
                  <p>用户数</p>
                  <p>
                    <countup :start-val="0" :end-val="JSON.parse(echain.blockTransX || 0)" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
              <div class="flex flex-cont group-item deal-num">
                <img src="../images/deal.png" alt="">
                <span>
                  <p>交易量</p>
                  <p>
                    <countup :start-val="0" :end-val="JSON.parse(echain.blockAccounts || 0)" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
            </div>
          </swiper-item>
          <swiper-item  class="">
            <div class="flex-box-align" style="height: 100%">
              <div class="flex flex-cont group-item aver-time">
                <img src="../images/perTime.png" alt="">
                <span>
                  <p>区块生成平均时间</p>
                  <p>
                    <countup :start-val="1" :end-val="JSON.parse(echain.blockAverTime || 0)" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
              <div class="flex flex-cont group-item per-second">
                <img src="../images/dealTotal.png" alt="">
                <span>
                  <p>每秒交易量</p>
                  <p>
                    <countup :start-val="1" :end-val="JSON.parse(echain.blockTxPerMin || 0)" :duration="2" class="demo1"></countup>
                  </p>
                </span>
              </div>
            </div>
          </swiper-item>
        </swiper>
      </div>
      <div class="latest-attention flex-box-align">
        <span>最新公告</span>
        <div class="flex">
          <text-scroll
            :dataList="newsList"
            scrollType="scroll-left-linear"
          >
          </text-scroll>
          <!--<swiper auto height="30px" :interval="interval" class="text-scroll" :show-dots="false" @on-index-change="handleSwiper">-->
            <!--<swiper-item  v-for="(item, index) in newsList" :key="index">-->
              <!--<p @click="linkTo('noticeDetail',item.newsId)" id="newsTitle"></p>-->
            <!--</swiper-item>-->
          <!--</swiper>-->
        </div>
        <div class="btn-more" @click="$router.push('/noticeList')">更多</div>
      </div>
    </div>

    <div style="width: 100%" :class="{absolute: isAbsolute}">
      <div class="nav-wrapper">
        <ul class="nav-list flex-cont" :class="{fixed: isAbsolute}">
          <li class="flex" :class="{active: activeId == item.key}" v-for="(item, index) in navList" :key="index" @click="hanldleToggle(item.key)">{{item.value}}</li>
        </ul>
        <div style="margin-top: .27rem;margin-bottom: .98rem;">
          <!-- <scroller lockx :scrollbar-y="false" :bounce="false" @on-scroll="handleScroll" height="-40" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2"> -->
            <div class="">
              <ul class="nav-content flex-box-container">
                <li v-for="(item, index) in dataList" :key="index" @click="handleClickVoteItem(item)">
                  <div style="width: 100%;height: 3.36rem;backgroundSize: cover;position: relative;backgroundPosition: center;" :style="{backgroundImage: 'url(' +item.voteCoverUrl+ ')'}">
                    <div class="pos-limit" v-if="item.isLimit == 'y'">限定</div>
                    <div class="pos-in flex-box-align">
                      <span>进入</span>
                      <img src="../images/moreRight.png" alt="">
                    </div>
                  </div>
                  <div class="flex-cont vote-title">{{item.voteTitle}}</div>
                  <div class="bottom-data flex-cont">
                    <div class="flex">
                      <img src="../images/userName.png" alt="">
                      <span>{{item.turnout}}</span>
                    </div>
                    <div class="flex">
                      <img src="../images/jiaoyi.png" alt="">
                      <span>{{item.obtained}}</span>
                    </div>
                    <div class="flex">
                      <img src="../images/watchNum.png" alt="">
                      <span>{{item.totalBrowsing}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div v-if="noData" class="no-data">没有更多内容</div>
            <div v-if="!dataList.length" class="no-data1">没有更多内容</div>
          <!-- </scroller> -->
        </div>


      </div>
    </div>


    <menu-list></menu-list>
  </div>
</template>
<script>
  import menuList from './common/navbar-menu';
  import TextScroll from "./common/TextScroll";
  import { SwiperItem,Swiper,Scroller,Countup } from 'vux'
  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js"),
    wsService = require("../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      SwiperItem,
      Swiper,
      menuList,
      TextScroll,
//      Scroller,
      Countup
    },
    data() {
      return {
        echain: {
          "blockAccounts": 0,
          "blockAverTime": 0,
          "blockHeight": 0,
          "blockNodes": 0,
          "blockTransX": 0,
          "blockTxPerMin": 0
        },
        echainImg: {},
        interval: 3000,
        newsList:[],
        demoList:[],
        stateTatus:'',
        navList: [{
          key: "RECOMMENDED",
          value: "最新推荐"
        },{
          key: "ENTERTAINMENT",
          value: "电视娱乐"
        },{
          key: "PHOTOGRAPHY",
          value: "摄影自拍"
        },{
          key: "ENTERPRISE",
          value: "政企活动"
        },{
          key: "OTHER",
          value: "OTHER"
        }],
        activeId: "RECOMMENDED",
        dataList: [],
        pullupConfig2: {
          content: '上拉加载更多',
          downContent: '松开进行加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',
        loading:true,
        noData:false,
        isAbsolute: false
      }
    },
    mounted() {
      let url = CONSTANT.URL.SYS.DICTIONARY;
      this.getEchain();
      this.getNewsList();
      this.getEchainImgs();

      window.onscroll= ()=>{
        //为了保证兼容性，这里取两个值，哪个有值取哪一个　
        this.isAbsolute = true
        　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//          console.log(scrollTop)
          if(scrollTop>400){
             this.$nextTick( ()=> {
             // DOM 更新了
             this.isAbsolute = true
          })

          }else{
           this.$nextTick( ()=> {
             // DOM 更新了
             this.isAbsolute = false
          })
          }
        }

      this.getList(this.activeId);

      let interval = setInterval( () => {
        this.getEchain();
      }, 600000)
    },
    methods: {
      linkTo(link,id){
        this.$router.push({ path: link, query: { id: id }})
      },
      async getEchain() {
        const json = await this.$https.fetchPost(this.$api.blockHeight, {});
        if (json.data.code === 10000) {
          this.echain = json.data.data;
        }
      },
      async getEchainImgs() {
        const json = await this.$https.fetchGet(this.$api.blockImgs, {});
        if (json.data.code === 10000) {
          const data = json.data.data;
          this.echainImg = data;
          // this.demoList = [{
          //   voteCoverUrl:data.blockHeightFileUrl,
          // },{
          //   voteCoverUrl:data.nodeFileUrl,
          // },{
          //   voteCoverUrl:data.usersAmountFileUrl,
          // }]
        }
      },
      async getNewsList() {
        const json = await this.$https.fetchPost(this.$api.newsList, {
          current: 1,
          size: 100
        })
        if(json.data.code === 10000) {
          this.newsList = json.data.data.records;
        }
      },
      handleSwiper(index) {
        let self = this;
        let newsList = this.newsList;

      },
      handleScroll(top, left) {
        if (top.top > 0) {
          this.isAbsolute = true
        } else if(top.top == 0) {
          this.isAbsolute = false
        }
      },
      load2 () {
        if(!this.loading) return false;
        let { pageIndex, pageCount} = this.dataForm;
        if (pageCount <= this.pageIndex){
          setTimeout(() => {
            this.$refs.demo2.disablePullup()
            this.noData = true
          }, 100)
          return false;
        }
        this.loading = false;
        this.pageIndex++;
        setTimeout(() => {
          this.getList(this.activeId)
          this.$refs.demo2.donePullup()
        }, 100)
      },
      async getList(params) {
        let url = this.$api.voteList,
          param = {
            current: 1, 
            size: 1000,
            voteCategory:params,
          }
        const json = await this.$https.fetchPost(url, param)
          this.$vux.loading.hide()
        if(json.data.code === 10000) {
           let data = json.data.data,
              pageCount = data.pages,
              bussData = data.records;
            this.dataList = bussData
        }
      },
      async hanldleToggle(val) {
        this.$vux.loading.show({
           text: '加载中'
        })
        this.activeId = val;
        let url = this.$api.voteList,
          param = {
            current: 1, 
            size: 1000,
            voteCategory:val,
          }
        const json = await this.$https.fetchPost(url, param)
          this.$vux.loading.hide()
        if(json.data.code === 10000) {
           let data = json.data.data,
              pageCount = data.pages,
              bussData = data.records;
            this.dataList = bussData
        }
      },
      async handleClickVoteItem(item) {
        let self = this;
        if (item.isLimit) {
          const json = await this.$https.fetchGet(this.$api.applyStatus+item.id, {});
          if (json.data.code == 10000) {
              if (json.data.data == 'SUCCESS') {
                if (item.voteOptionType == 'SIMPLE') {
                  this.$router.push({path: '/voteDetailEasy', query: {id: item.id}})
                } else if(item.voteOptionType == 'PICTURE'){
                  this.$router.push({path: '/voteDetail', query: {id: item.id}})
                }
              } else if(json.data.data == 'REJECT') {
                this.$vux.alert.show({
                  title: "提示",
                  content: "驳回",
                  onShow () {

                  },
                  onHide () {
                    self.getDetail()
                  }
                })
              } else if(res.data.bussData == 'AUDITING') {
                this.$vux.alert.show({
                  title: "提示",
                  content: "审核中",
                  onShow () {

                  },
                  onHide () {
                    self.getDetail()
                  }
                })
              }
            } else {
              this.$vux.confirm.show({
                content: '参与此投票需申请限权,是否申请？',
                onShow () {
                  console.log('plugin show')
                },
                onHide () {
                  console.log('plugin hide')
                },
                onCancel () {
                  console.log('plugin cancel')
                },
                onConfirm () {
                  self.$router.push({path: "/voteApply", query: {id: item.id, title: item.voteTitle}}) //item.isLimit, item.voteId, item.voteTitle
                }
              })
            }

        } else {
          if (item.voteOptionType == 'SIMPLE') {
            this.$router.push({path: '/voteDetailEasy', query: {id: item.id}})
          } else if(item.voteOptionType == 'PICTURE'){
            this.$router.push({path: '/voteDetail', query: {id: item.id}})
          }
        }
      },
      wordByWord(val) {
        let split = val.split(""), i = 0, str = ""
        let interval = setInterval( () => {
          if (i > split.length - 1) {
            i = 0;
            return ""
          } else {

            return str
          }

        }, 500)
      }
    }
  };
</script>
<style lang="less">
  .home {
    .no-data1{
      position: absolute;
      left: 40%;
      font-size: 14px;
      color: #999;
    }
    font-size: .3rem;
    background-color: #f2f2f2;
    padding-bottom: .5rem;
    min-height: 100%;
    // .absolute {
    //   position: absolute;
    //   left: 0;
    //   right: 0;
    //   top: 0;
    //   bottom: 0;
    // }
    .fixed {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      padding: .3rem .5rem!important;
    }
    .content-swiper {
      background-color: #fff;
      position: relative;
      margin-bottom: .16rem;
      .pos-group {
        position: absolute;
        width: 6.88rem;
        left: .31rem;
        /*width: 6rem;*/
        /*left: .75rem;*/
        height: 1rem;
        /*top: 3.15rem;*/
        top: 3.5rem;
        background-color: #000;
        border-radius: 4px;
        .group-item {
          height: 100%;
          color: #fff;
          span {
            margin-left: .17rem;
            p:first-child {
              font-size: .22rem;
            }
            p:last-child {
              font-size: .28rem;
              color: #e11818;
            }
          }
        }
        .group-height {
          img {
            width: .48rem;
            height: .48rem;
            vertical-align: middle;
          }
        }
        .point-num {
          img {
            width: .5rem;
            height: .5rem;
            vertical-align: middle;
          }
        }
        .user-num {
          img {
            width: .5rem;
            height: .4rem;
            vertical-align: middle;
          }
        }
        .deal-num {
          img {
            width: .5rem;
            height: .5rem;
            vertical-align: middle;
          }
        }
        .aver-time {
          img{
            width: .5rem;
            height: .5rem;
            vertical-align: middle;
          }
        }
        .per-second {
          img{
            width: .5rem;
            height: .5rem;
            vertical-align: middle;
          }
        }
      }
      .latest-attention {
        padding: 0 .31rem .22rem .31rem;
        // padding: 0 .5rem .22rem .5rem;
        margin-top: .95rem;
        /*margin-top: 1.2rem;*/
        font-size: .26rem;
        color: #333;
        .vux-swiper {
          line-height: 30px;
        }
        span {
          margin-right: .15rem;
          color: #EB0E0E;
          border: 1px solid #EB0E0E;
          border-radius: 4px;
          padding: .06rem;
        }
      }
    }
    .nav-wrapper {
      color: #333;
      font-size: .28rem;
      padding: 0 .3rem;
      background-color: #fff;
      .nav-list {
        padding: .3rem 0;
        background: #fff;
        z-index: 9;
        li {
          text-align: center;
        }
        .active {
          color: #E33F3F;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            width: 100%;
            left: 0;
            right: 0;
            bottom: -.27rem;
            height: 2px;
            background-color: #E75353;
          }
        }
      }
      .nav-content {
        /*margin-top: .54rem;*/
        margin-bottom: .98rem;
        li{
          width: 3.36rem;
          height: 4.76rem;
          box-shadow: 1px 1px 5px  rgba(0, 0, 0, .09);
          margin-bottom: .2rem;
          border-radius: .1rem;
          &:last-child {
            margin-bottom: .98rem;
          }
          &:nth-child(2n-1){
            margin-right: .18rem;
          }
          .pos-limit {
            position: absolute;
            padding: .04rem .08rem;
            background-color:#E33F3F;
            font-size: .2rem;
            color: #fff;
            top: 0;
            left: 0;
            border-radius: 4px;
          }
          .pos-in {
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: .22rem;
            color: #fff;
            background: rgba(0, 0, 0, 0.6);
            padding: .04rem .08rem;
            border-radius: 4px;
            img {
              width: .23rem;
              height: .2rem;
              vertical-align: middle;
              margin-left: .09rem;
            }
          }
          .vote-title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            padding: 0 .27rem;
            font-size: .3rem;
            color: #333;
            height: 1rem;
          }
          .bottom-data {
            font-size: .22rem;
            div {
              text-align: center;
              color: #333;
            }
            div:nth-child(1) {
              img {
                width: .23rem;
                height: .19rem;
                vertical-align: middle;
              }
            }
            div:nth-child(2) {
              img {
                width: .2rem;
                height: .2rem;
                vertical-align: middle;
              }
            }
            div:nth-child(3) {
              img {
                width: .26rem;
                height: .16rem;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }

  .vux-slider > .vux-indicator, .vux-slider .vux-indicator-right{
    right: 24px;
    bottom: 18px!important;
  }
  .vux-slider > .vux-indicator > a > .vux-icon-dot, .vux-slider .vux-indicator-right > a > .vux-icon-dot{
    background-color: #fff;
  }
  .vux-slider > .vux-indicator > a > .vux-icon-dot.active, .vux-slider .vux-indicator-right > a > .vux-icon-dot.active{
    background-color: #198AE7!important;
  }
</style>
